<template>
  <div class="commom_title" :style="{ background, paddingLeft, paddingRight }">
    <div class="common_title_left" :style="{ color, fontSize }">
      <slot></slot>
    </div>
    <div class="common_title_right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'commonTitle',
  };
</script>
<script lang="ts" setup>
  import variable from '@/styles/variable.module.scss';
  interface Props {
    paddingLeft?: string;
    paddingRight?: string;
    background?: string;
    fontSize?: string;
    color?: string;
  }
  const props = withDefaults(defineProps<Props>(), {
    color: variable.primaryColor,
    background: variable.bgColor,
    paddingLeft: '23px',
    paddingRight: '19px',
    fontSize: '16px',
  });
</script>

<style scoped lang="scss">
  .commom_title {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    line-height: 48px;
    display: flex;
    justify-content: space-between;
    .common_title_left {
      flex: 1;
      width: 0;
    }
  }
</style>
